<template>
  <div>
    <h2>基本信息</h2>
    <Form
      ref="formValidate"
      :model="formValidate"
      :label-width="140"
    >
      <row>
        <Col span="12">
          <FormItem label="项目分类">
            <Select v-model="formValidate.sort" placeholder="选择项目分类">
              <Option v-for="item in options" :value="item.cid" :key="item.cid" icon="ios-clock-outline">
                {{ item.c_name }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="项目名称">
            <Input
              v-model="formValidate.project_name"
              placeholder="填写项目名称"
              @keyup.native="trimLR"
            ></Input>
          </FormItem>
          <FormItem label="众筹天数">
            <Select v-model="formValidate.days" placeholder="选择众筹天数" style="width: 50%">
              <Option value="7">一周</Option>
              <Option value="30">一个月</Option>
              <Option value="182">半年</Option>
            </Select>
          </FormItem>
          <FormItem label="筹资金额" style="width: 60%">
            <Input v-model="formValidate.money">
              <span slot="append">元</span>
            </Input>
          </FormItem>
          <FormItem label="缩略图" style="width: 60%">
            <Upload
                action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                :before-upload="thumbnail"
                accept="image/*"
            >
              <Button icon="ios-cloud-upload-outline">选择图片</Button>
            </Upload>
            <div v-if="imgUrl1 != null">
              <img :src="imgUrl1" alt="" class="preview">

            </div>
          </FormItem>
          <FormItem label="长图" style="width: 60%">
            <Upload
                action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                :before-upload="long_pic"
                accept="image/*"
            >
              <Button icon="ios-cloud-upload-outline">选择图片</Button>
            </Upload>
            <div v-if="imgUrl2 != null">
              <img :src="imgUrl2" alt="" class="preview">
            </div>
          </FormItem>
          <FormItem label="详情图" style="width: 60%">
            <Upload
                multiple
                action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                :before-upload="detail_pic"
                accept="image/*"
            >
              <Button icon="ios-cloud-upload-outline">选择图片(可多选)</Button>
            </Upload>
            <div v-if="imgUrl3 != null" v-for="imgUrl3_item in imgUrl3">
              <img :src="imgUrl3_item" alt="" class="preview">
            </div>
          </FormItem>
          <FormItem label="视频上传" style="width: 60%">
            <Upload
                multiple
                action="http://localhost/tp5/public/index/Sponsor/upload_pic"
                :before-upload="videoUpload"
                accept="video/*"
            >
              <Button icon="ios-cloud-upload-outline">选择视频</Button>
            </Upload>
            <div v-if="videoUrl != null">
              <video :src="videoUrl" alt="" controls width="250px"></video>
            </div>
          </FormItem>

          <FormItem label="项目简介">
            <Input
              v-model="formValidate.desc"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="填写简介"
              maxlength="200"
              show-word-limit
              @keyup.native="no_null_desc"
            ></Input>
          </FormItem>
          <FormItem>
            <Button
              type="primary"
              @click="firstSubmit"
              style="background-color: #dc143c;border: 0"
            >下一步</Button>
          </FormItem>
        </Col>
      </row>
    </Form>
  </div>

</template>

<script>
  import axios from "axios";
  import  {getSort ,addGoods,thumbnail,long_pic,detail_pic} from 'server/sponsor.js'

  export default {
    name: "basic_info",
    data(){
      return{
        options: [],
        formValidate: {
          sort: "",
          project_name: "",
          days: "",
          money: "",
          desc: "",
        },
        imgUrl1:null,
        imgUrl2:null,
        imgUrl3:[],
        videoUrl:null,
        thumbnail_file: '',
        long_pic_file: '',
        detail_pic_file: [],
        thumbnail_url: '',
        long_pic_url: '',
        detail_pic_url: [],
        video_file: ''
      };
    },
    methods: {
        //缩略图预览
      thumbnail(file){
          this.thumbnail_file = file;
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
              const _base64 = reader.result;
              this.imgUrl1 = _base64;
          }
        return false;
      },
        //长图预览
      long_pic(file){
        this.long_pic_file = file;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            const _base64 = reader.result;
            this.imgUrl2 = _base64;
        }
        return false;
      },
        //详情图预览
      detail_pic(file){
        this.detail_pic_file.push(file);
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
            const _base64 = reader.result;
            this.imgUrl3.push(_base64)
        }
        return false;
      },
      videoUpload(file){
        this.video_file = file;
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          const _base64 = reader.result;
          this.videoUrl = _base64;
        }
   
        return false;
      },
      firstSubmit(){
        if (!this.formValidate.sort) {
          return this.$Message.error('请选择项目分类')
        }
        if (!this.formValidate.project_name) {
          return this.$Message.error('请填写项目名称')
        }
        if (!this.formValidate.days) {
          return this.$Message.error('请选择众筹天数')
        }
        if (!this.$rex.money(this.formValidate.money)) {
          return this.$Message.error('请填写正确的筹资金额')
        }
        if (!this.imgUrl1) {
          return this.$Message.error('请选择缩略图')
        }
        if (!this.imgUrl2) {
          return this.$Message.error('请选择长图')
        }
        if (this.imgUrl3 == '') {
          return this.$Message.error('请选择详情图')
        }
        if (!this.videoUrl) {
          return this.$Message.error('请选择项目视频')
        }
        if (!this.formValidate.desc) {
          return this.$Message.error('请填写项目简介')
        }

        const obj = {
          sort:this.formValidate.sort,
          project_name:this.formValidate.project_name,
          days:this.formValidate.days,
          money:this.formValidate.money,
          desc:this.formValidate.desc,
          thumbnail_file:this.thumbnail_file,
          long_pic_file :this.long_pic_file,
          detail_pic_file:this.detail_pic_file,
          video_file:this.video_file
        }

        this.$store.commit('basic_info',obj);
        this.$emit('first_step', this.stepNumber)
      },
      _getSort(){
          getSort().then(res=>{
              this.options = res.data;
          })
      },
      trimLR() {
        this.formValidate.project_name = this.formValidate.project_name.replace(/^\s+|\s+$/gm,'')
      },
      no_null_desc(){
        this.formValidate.desc = this.formValidate.desc.replace(/^\s+|\s+$/gm,'')
      }
    },
    created() {
      this._getSort()
    }
  }
</script>

<style scoped>
h2{
  margin-bottom: 20px;
}
.preview{
    width: 80px;
}
</style>